/**
 * React-Redux 的 connect() 的使用
 *
 *    概念：是一个高阶组件，用于高阶一个UI组件，返回一个容器组件，在这个过程中可以通过配置向UI组件传递Redux相关的State数据到UI组件的props上。
 *
 *    完整语法：
 *      const 容器组件 = connect(mapStateToProps, mapDispatchToProps)(UI组件)
 *
 *      mapStateToProps, mapDispatchToProps 都是可选的参数
 *
 *    mapStateToProps
 *      1. 是一个函数，用于映射State数据到UI组件的Props上。
 *      2. 该函数需要返回一个对象，返回的对象就是映射到UI组件的Props数据
 *      3. 该函数默认会触发一次，后续当Store发生变化会再次触发
 *      4. 该函数接受到两个参数，分别是： state 与 ownProps
 *        state     - 仓库的state数据
 *        ownProps  - 容器组件收到的一些props
 *
 *      语法：
 *        function mapStateToProps(state, ownProps) {
 *          return {
 *            key1: state.msg,
 *            key2: state.count
 *          }
 *        }
 *
 *    mapDispatchToProps
 *
 *      PS: 当没有传递该参数时，UI组件会收到一个 dispatch 的 prop
 *
 *      一：函数返回对象的写法
 *        1. 函数会接受到两个参数，分别是：dispatch(store.dispatch) 与 ownProps
 *        2. 需要返回一个对象，对象的 value 一般是一个直接派发动作的函数
 *
 *        语法：
 *          function mapDispatchToProps(dispatch) {
 *            return {
 *              fn1: () => dispatch({ type: 'INCREMENT' }),
 *              fn2: () => dispatch({ type: 'DECREMENT' })
 *            }
 *          }
 *
 *      二：对象的写法【推荐】
 *        1. 对象的 value 还是一个函数，只是这个函数是一个动作创建函数, 当这个函数被执行的时候，会自动派发动作
 *
 *        语法：
 *          const mapDispatchToProps = {
 *             fn1: () => ({ type: 'INCREMENT' }),
 *             fn2: () => ({ type: 'DECREMENT' })
 *          }
 *
 */

import { Component } from "react";
import Hello from "./components/Hello";
import World from "./components/World";

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <Hello name="zhagnsan" />
        <hr />
        <World />
      </div>
    );
  }
}
